<template>
  <div class="layout_container">
    <header class="layout_top">
      <div class="layout_topcontent">
        <div class="layout_left">
          <span @click="navigateTo('home')">首页</span>
          <span
            v-for="(btn, index) in roleButtons[role]"
            :key="index"
            @click="navigateTo(btn.route)"
          >
            {{ btn.name }}
          </span>
        </div>
        <div class="layout_right">
          <div v-if="!useStore.isAuthenticated" @click="useStore.showLoginModal">登录</div>
          <div v-else class="layout_login">
            <img :src="useStore.avatar" @click="dropdownVisible = !dropdownVisible" />
            <div v-if="dropdownVisible" class="down">
              <div @click="navigateTo('profile')">个人中心</div>
              <div @click="logOut">退出登录</div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 登录对话框 -->
    <login
      class="login"
      :visible="useStore.showLoginDialog"
      @update:visible="(val) => (useStore.showLoginDialog = val)"
    />
    <main class="layout_main">
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import useUserStore from '@/stores/modules/user'
import login from '@/components/login/index.vue'
import { computed, ref } from 'vue'
import Profile from './profile.vue'

const useStore = useUserStore()
const role = computed(() => useStore.role)

const dropdownVisible = ref(false)

const navigateTo = (routeName: string) => {
  router.push({ name: routeName })
  dropdownVisible.value = false
}
function logOut() {
  useStore.userLogout()
  navigateTo('layout')
}

const roleButtons = {
  customer: [{ name: '我的订单', route: 'order' }],
  borrower: [
    { name: '订单管理', route: 'order' },
    { name: '供货广场', route: 'borSupply' },
  ],
  brand: [
    { name: '订单管理', route: 'order' },
    { name: '仓库', route: 'braStore' },
  ],
}
</script>
<style lang="scss" scoped>
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.layout_container {
  width: 100%;
  height: 100vh;
  background: url('../assets/images/bg1.jpg') no-repeat;
  background-size: cover;
  overflow: auto;
  .layout_top {
    position: fixed; /* 固定在顶部 */
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #ffffff;
    color: #000000;
    font:
      normal normal 18px Roboto,
      'Helvetica Neue',
      Helvetica,
      Tahoma,
      Arial;
    cursor: default;
    z-index: 11;

    .layout_topcontent {
      width: 1000px;
      margin: 0 auto;
      line-height: 50px;
      .layout_left {
        float: left;
      }
      .layout_right {
        float: right;
        .layout_login {
          position: relative;
          img {
            margin: 5px 0;
            width: 40px;
            height: 40px;
            clip-path: circle(50%);
          }
          .down {
            position: absolute;
            top: 50px;
            left: 10px;
            width: 60px;
            font-size: 14px;
            line-height: 24px;
            background-color: #fff;
          }
        }
      }
    }
    .layout_left span {
      margin: 0 50px 0 0;
    }
    .layout_left span:hover,
    .down div:hover {
      color: #105cd6;
    }
  }
  .login {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 11;
  }
  .layout_main {
    width: 1000px;
    height: calc(100vh - 40px);
    margin: 0 auto;
    padding-top: 50px; /* 确保主内容不被顶部遮挡 */
  }
}
</style>
